<template>
    <div id="main"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import mapjson from '../../../components/map.json'
onMounted(() => {
    initMapData()
})
const initMapData = () => {
    var chart = echarts.init(document.getElementById('main') as HTMLElement)
    var mainBackgroundColor = '#fff'
    var echartsTitleTextColor = '#000'
    var echartsSubTitleTextColor = 'darkorange'
    var mapLabelNormalColor = '#222'
    var mapLabelEmphasisColor = '#666'
    var mapItemNormalColor = '#d4e8ff'
    var mapItemEmphasisColor = 'darkorange'
    var mapItemBorderColor = 'dodgerblue'
    var mapToolboxIconTitleColor = 'darkorange'
    // var mapToolboxIconColor = 'darkorange'
    var mapToolboxIconBorderColor = 'darkorange'
    // chart.on('click', function (a) {
    //   const dom = window.document.querySelector('.n-data-table-wrapper')
    //   console.log('aaaaaa', a)
    //   if (a.componentType == 'series') {
    //   }
    // })

    let option: any = {
        backgroundColor: mainBackgroundColor,
        title: {
            text: '',
            link: '#',
            left: 'center',
            textStyle: {
                color: echartsTitleTextColor,
                fontSize: 24,
                fontWeight: 'normal',
                fontFamily: 'Microsoft YaHei',
            },
            subtextStyle: {
                color: echartsSubTitleTextColor,
                fontSize: 20,
                fontWeight: 'normal',
                fontFamily: 'Microsoft YaHei',
            },
        },
        tooltip: { trigger: 'item', formatter: '{b}' },
        toolbox: {
            show: true,
            orient: 'vertical',
            top: 'center',
            right: '40',
            itemSize: 24,
            itemGap: 20,
            showTitle: true,
            feature: {},
            iconStyle: {
                normal: {
                    color: mapToolboxIconBorderColor,
                    borderColor: mapToolboxIconBorderColor,
                },
            },
            emphasis: { iconStyle: { color: mapToolboxIconTitleColor } },
        },
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 1000,
    }

    function renderMap(b: any, a: any) {
        window.console.log('进来了。。。。。2')
        option.series = [
            {
                name: b,
                type: 'map',
                mapType: b,
                roam: false,
                nameMap: { china: '中国' },
                label: {
                    // 是否默认显示 name
                    normal: {
                        show: true,
                        textStyle: { color: mapLabelNormalColor, fontSize: 14 },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: mapLabelEmphasisColor,
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    // 区块背景色
                    normal: {
                        areaColor: mapItemNormalColor,
                        borderColor: mapItemBorderColor,
                    },
                    emphasis: { areaColor: mapItemEmphasisColor },
                },
                data: a,
            },
        ]
        chart.setOption(option)
    }
    function getExampleData() {
        let d = []
        for (var b = 0; b < mapjson.features.length; b++) {
            d.push({
                id: mapjson.features[b].properties.id,
                level: mapjson.features[b].properties.level,
                name: mapjson.features[b].properties.name,
            })
        }
        echarts.registerMap('综改区', JSON.stringify(mapjson))
        renderMap('综改区', d)
    }
    getExampleData()
}
</script>

<style lang="less" scoped></style>
